<template>
    <div class="viewBrokerDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>合约中心</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/channelOrAgentManage' }">渠道经纪管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: viewBrokerUrl }">查看经纪人</el-breadcrumb-item>
            <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs v-model="recordName">
            <el-tab-pane label="基本信息" name="基本信息">
                <el-form label-width="120px" size="small" :model="form">
                    <el-form-item label="角色：">{{form.brokerType}}</el-form-item>
                    <el-form-item label="城市：">{{form.brokerCity}}</el-form-item>
                    <el-form-item label="用户姓名：">{{form.brokerName}}</el-form-item>
                    <el-form-item label="用户手机号：">{{form.brokerPhone}}</el-form-item>
                    <el-form-item label="初始密码：">{{form.brokerPassword}} {{form.leaderPhone}}</el-form-item>
                    <el-form-item label="用户邮箱：">{{form.brokerEmail}}</el-form-item>
                    <el-form-item label="所属公司：">{{form.companyName}}</el-form-item>
                    <el-form-item label="门店编码：">{{form.storeNumber}}</el-form-item>
                    <el-form-item label="所属门店：">{{form.storeName}}</el-form-item>
                    <el-form-item label="所属板块：">{{form.storeArea}}</el-form-item>
                    <el-form-item label="新建时间：">{{form.brokerCreateTime}}</el-form-item>
                    <el-form-item label="权限：">{{form.storeCompetence}}</el-form-item>
                    <el-form-item label="新房分佣比例：" v-if="form.brokerHouse !== -1">{{form.brokerHouse}}%</el-form-item>
                    <el-form-item label="保险分佣比例：" v-if="form.brokerInsurance !== -1">{{form.brokerInsurance}}%
                    </el-form-item>
                    <el-form-item label="产权分佣比例：" v-if="form.brokerProperty !== -1">{{form.brokerProperty}}%
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="认证信息" name="认证信息">
                <h5>认证信息</h5>

                <el-form label-width="120px" size="small" :model="form">
                    <el-form-item label="姓名：">{{form.brokerIdName}}</el-form-item>
                    <el-form-item label="证件号码：">{{form.brokerIdCard}}</el-form-item>
                </el-form>

                <h5>证件照片</h5>
                <div class="ml30">
                    <el-image
                            style="width: 200px; height: 200px"
                            :src="form.brokerIdCardFront"
                            :preview-src-list="[form.brokerIdCardFront, form.brokerIdCardBack]">
                    </el-image>
                    <el-image
                            style="width: 200px; height: 200px"
                            :src="form.brokerIdCardBack"
                            :preview-src-list="[form.brokerIdCardFront, form.brokerIdCardBack]">
                    </el-image>
                </div>
                <h5>银行卡信息</h5>
                <el-form label-width="120px" size="small" :model="form">
                    <el-form-item label="开户行：">{{form.brokerBankOpenName}}</el-form-item>
                    <el-form-item label="开户支行：">{{form.brokerBankOpenSubName}}</el-form-item>
                    <el-form-item label="收款账号：">{{form.brokerBankOpenCard}}</el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'viewBrokerDetail',
        data() {
            return {
                viewBrokerUrl: '',
                form: {},
                recordName: '基本信息',
                id: ""
            }
        },
        mounted() {
            const query =  this.$route.query
            this.id = query.id;
            this.viewBrokerUrl  = `/viewBroker?companyName=${query.companyName}`
            this.getDetail(this.id)
        },
        methods: {
            getDetail(brokerId) {
                this.$axios.post("/cms/stores/broker/fullBroker", {
                    brokerId
                }).then((res) => {
                    this.form = res
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .viewBrokerDetail {

    }
</style>

